<template>
	<div id="app">
		<!-- 上 -->
		<div class="flex">
			<div v-for="(item,index) in top" :key='item' 
			:class="{'borderR':index !== top.length-1,'item':true,active:cur === item}">
				<!-- {{ files[item] }} -->
				<img class="item_bcg" :src="require(`../public/images${files[item]}`)" alt=""> 
			</div>
		</div>
		<div class="flex" style="justify-content: space-between;">
			<!-- 左 -->
			<div style="width: 100px;" class="left">
				<div v-for="(item) in left" :key='item' :class="{'borderT':true,'item inline':true,active:cur === item}">
					<!-- {{ item }} -->
					<img class="item_bcg" :src="require(`../public/images${files[item]}`)" alt=""> 
				</div>
			</div>
			<div style="width: 299rpx;height: 300px;overflow: hidden;">
				<img src="../public/images2/jojo.jpg" alt="" style="height: 299px;margin-left: -93px;">
			</div>
 
			<!-- 右 -->
			<div style="width: 100px;" class="right">
				<div v-for="(item) in right" :key='item' :class="{'borderT':true,'item inline':true,active:cur === item}">
					<!-- {{ item }} -->
					<img class="item_bcg" :src="require(`../public/images${files[item]}`)" alt=""> 
				</div>
			</div>
		</div>
		<!-- 下 -->
		<div class="flex bottom">
			<div v-for="(item,index) in bottom" :key='item' :class="{'borderR':index !== top.length-1,'item':true,active:cur === item}">
				<!-- {{ item }} -->
				<img class="item_bcg" :src="require(`../public/images${files[item]}`)" alt=""> 
			</div>
		</div>
		<button @click="start">开始</button>
		<button @click="end">结束</button>
		<child @hook:created='hook()'></child>
		<h1>{{ asd[2] }}</h1>
	</div>
</template>

<script>
	import child from '@/src/components/child.vue'
	export default {
		components:{
			child
		},
		name: 'App',
		data() {
			return {
				top: [0,1, 2, 3, 4],
				right: [5,6, 7],
				bottom: [12,11,10,9,8],
				left: [ 15, 14,13],
				cur:0,
				// urls:require.context('../public/images',true,/\.jpg$/),
				files:[],
				deleay:1000,
				fastestTime:0,
				stop:false,
				fasresNum:Math.round(Math.random()*20) +70,
				asd:[1,2,3,4]
			}
		},
		methods:{
			hook(){
				console.log(12312313213132)
				console.log(45465456)
				// setInterval(()=>{
				// 	this.cur++
				// },1000)
			},
			jishi(){
				setTimeout(()=>{
					if(this.deleay < 100){
						if(this.fastestTime === this.fasresNum){
							this.deleay+=50
						}else{
							this.fastestTime+=1
						}
					}else{
						if(this.fastestTime === this.fasresNum){
							if(this.deleay >900){
								return false
							}else{
								this.deleay+=50	
							}
						}else{
							this.deleay-=50
						}
					}
					if(this.cur >= 15){
						this.jishi()
						return this.cur = 0
					}
					this.jishi()
					this.cur+=1
				},this.deleay)
			},
			start(){
				// debugger
				if(this.deleay == 950 || this.deleay == 1000){
					if(this.cur == 15){
						this.cur = 0
					}else{
						this.cur+=1
					}
					this.fastestTime = 0
					this.deleay = 900
					this.jishi()
					return console.log('开始啦')
				}
				console.log('请勿重复点击')
			},
			end(){
				this.fastestTime = this.fasresNum
				this.deleay = 1000
			}
		},
		mounted() {
			// this.$on('hooks:created', this.hook)
			// window.vmm = this
			// this.asd.length = 2
			
			// setTimeout(()=>{
			// 	// console.log('重新渲染')
			// 	// this.$forceUpdate()
			// 	throw new Error('错误')
			// },3000)
			// throw new Error('错误')
			const files = require.context('../public/images',false,/\.jpg$/)
			window.files = []
			
			files.keys().forEach(key =>{
				
				let url =  key.slice(1)
				this.files.push(url)
				// window.files.push(require(url))
				console.log(require(`../public/images${url}`))
				// console.log(url,"../public/images/buloniya_newyear.jpg",url == "../public/images/buloniya_newyear.jpg")
				// console.log(require(url))
			})
		}
		
	}
</script>

<style lang="scss" scoped="scoped">
	$borWidth:1px;
	div /deep/ .child{
		color: red;
	}
	.item_bcg{
		position: absolute;
		width: 100%;
		z-index: -999;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		// visibility: hidden;
	}
	.active{
		background-color: rgba($color: #FF2D52, $alpha: 0.5) !important;
	}
	.left{
		div:last-child{
			border-bottom-color: rgba(0,0,0,0);
		}
	}
	.right{
		div:last-child{
			border-bottom-color: rgba(0,0,0,0);
		}
	}
	.left{
		div{
			width: 100px + $borWidth;
		}
		.item_bcg{
			width: 100px + $borWidth;
		}
	}
	.inline {
		display: inline-block;
	}

	.borderT {
		// border-top-width: $borWidth !important;
		border-top-color: rgba(0,0,0,0) !important;
	}

	.borderR {
		// border-right-width: $borWidth !important;
		border-right-color: rgba(0,0,0,0) !important;
	}

	.flex {
		display: flex;
		width: 500px;
		margin: 0 auto;
	}

	.item {
		border: $borWidth  solid red;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
		position: relative;
		overflow: hidden;
		vertical-align: top;
		font-size: initial;
	}


	div {
		box-sizing: border-box;
	}
	*{
		padding: 0;
		margin: 0;
	}
	.flex{
		font-size: 0;
	}
	#app{
		padding-top: 100px;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		overflow: scroll;
	}
</style>
